/* eslint-disable @typescript-eslint/no-explicit-any */
import React, { useEffect, useState } from "react";
import styled from "styled-components";
import { Swiper, SwiperSlide } from "swiper/react";
import "swiper/css";

import api from "@/api";

import "./style.css";

const BannerSwiper = styled.div`
  padding: 0 0.24rem;
`;

const SwiperImg = styled.img`
  width: 7rem;
  height: 3.2rem;
`;

const UseBannerSwiper: React.FC = () => {
  const [bannerList, setBannerList] = useState([]);

  useEffect(() => {
    api.banner.getBannerList({ goods_type_id: "" }).then((data: any) => {
      setBannerList(data);
      console.log("data =>", data);
    });
  }, []);

  return (
    <BannerSwiper>
      <Swiper
        spaceBetween={50}
        onSlideChange={() => console.log("slide change")}
        onSwiper={(swiper) => console.log(swiper)}
      >
        {bannerList.map((item: any) => {
          return (
            <SwiperSlide key={item.id}>
              <SwiperImg src={item.image}></SwiperImg>
            </SwiperSlide>
          );
        })}
      </Swiper>
    </BannerSwiper>
  );
};

export default UseBannerSwiper;
